<template>
    <div class="home"> 
        <!-- 导航栏 -->
        <van-nav-bar class="">
            <van-button slot="title" icon="search"  class="search-btn" type="info"  to="/search">
                搜索
            </van-button>
        </van-nav-bar>
        <!-- 导航栏 -->
        <van-tabs v-model="active" swipeable color="#2892FF">
            <van-tab :title="item.name" v-for="item in channels" :key="item.id">
                <article-list :channel = "item"/>
            </van-tab>     
            <!-- 右侧汉堡按钮 -->
            <div slot="nav-right" class="wap-nav-wrap" @click="showPopup= true">
                <van-icon name="wap-nav" />
            </div>
            <!-- 汉堡按钮把右侧的最后位置挡住了 ，解决办法就是  在这里添加一个占位元素 -->
            <div slot="nav-right" style=" width:33px; height: 42px; flex-shrink: 0"></div>
        </van-tabs>
        <!-- 文章频道列表 -->
        <!-- 这里是弹出层 -->
        <van-popup
        close-icon-position="top-left"
        v-model="showPopup"
        closeable
        position="bottom"
        class="channel-edit-popup"
        get-container="body"
        style="height: 100%"
        >
        <!-- 这里是弹层的内容 -->
        <channel-edit :userChannels="channels"
        @close="showPopup = false"
        @switch="switchActiveChannel"
        ></channel-edit>
        </van-popup>
    </div>
</template>
<script>
import ArticleList from '@/views/home/components/article-list'
import { getLoadChannel } from '@/api/user'
import ChannelEdit  from '@/views/home/components/channel-edit'

export default {
 name: 'Qa',
 components: {
     ChannelEdit,
     ArticleList
 },
 data() {
     return {
        active: 1,//控制被激活的标签
        //user频道
        channels:[],
        //控制主页弹出层的显示与隐藏
        showPopup: false
     }
 },
 methods: {
     //请求频道数据
     async loadchannel(){
         const { data } = await getLoadChannel()
         this.channels = data.data.channels
        //  this.channels.push(data.data.channels)
         console.log(data);
     },
    //  切换到汉堡栏选中的频道
    switchActiveChannel(activeValue){
        this.active = activeValue
    }
 }, 
 created (){
     //加载频道数据
     this.loadchannel()

 },
 closePorp(){
     this.showPopup = false
 }
} 
</script>
<style lang="less" scoped>
.home {
    .van-nav-bar {
    background-color: #2892FF;
    }
    .search-btn {
    width: 277px;
    height: 32px;
    font-weight: 400;
    background-color: #5babfb;
    color: white !important;
    line-height: 32px;
    border: unset;
    border-radius: 16px;
    .van-button__text {
        font-size: 14px;
    }
    .van-icon{
        font-size: 18px;
        color: white;
    }
    }
    /deep/.van-nav-bar__title {
        max-width: unset;
    }
    .wap-nav-wrap{
        position: fixed;
        right: 0px;
        width: 33px;
        height: 43px;
        line-height: 43px;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        .van-icon {
            font-size: 24px;
            color: #999;
        }
    }
}
</style>

    